<!-- 城市地铁管理 -->
<template>
  <div class>
    <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini">
      <el-form-item prop="projName" label="楼盘：">
        <el-input v-model="searchForm.projName" placeholder="请输入楼盘名称"></el-input>
      </el-form-item>
      <el-form-item prop="customer" label="推荐客户：">
        <el-input v-model="searchForm.customer" placeholder="请输入客户姓名/id/手机号"></el-input>
      </el-form-item>
      <el-form-item label="跟进更新时间：">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="status" label="成交状态：">
        <el-select v-model.trim="searchForm.status" placeholder="请选择成交状态">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="(item,index) in statusOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList(1)" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="()=>{time=[];$refs.searchForm.resetFields()}">重置</el-button>
      </el-form-item>
    </el-form>
    <table-list
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableFormatter="tableFormatter"
      :hasSera="true"
    ></table-list>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import tableList from "@/components/common/tableList";
import utils from "@/common/utils";
export default {
  name: "outInsuranceConfig",
  title: "外部接口接收管理",
  components: {
    "table-list": tableList
  },
  data() {
    return {
      searchForm: {
        projName: "",
        customer: "",
        status: "",
        bigenTime: "",
        endTime: ""
      },
      time: [],
      listIds: {},
      houseTitle: "",
      lineVisible: false,
      statusOptions: [
        { label: "未到访", value: 4 },
        { label: "已到访", value: 5 },
        { label: "已认购", value: 7 },
        { label: "已签约", value: 8 },
        { label: "已过期", value: 9 },
        { label: "推荐无效", value: 14 },
        { label: "已退房", value: 12 }
      ],
      tableInfos: [
        { label: "推荐客户id", prop: "clientCode" },
        { label: "客户名称", prop: "customerName" },
        { label: "客户手机号", prop: "customerPhone" },
        { label: "成交状态", prop: "status" },
        { label: "明源id", prop: "roomGUID" },
        { label: "房屋总价(元)", prop: "houseTotal", type: "money" },
        { label: "成交价(元)", prop: "total", type: "money" },
        { label: "楼盘", prop: "projName" },
        { label: "房间号", prop: "roomCode" },
        { label: "户型", prop: "huXing" },
        { label: "建筑面积(m²)", prop: "bldArea", type: "num" },
        { label: "套内面积(m²)", prop: "tnArea", type: "num" },
        { label: "跟进更新时间", prop: "time", type: "time" },
        { label: "接收记录", prop: "pushNum", fn: this.openPushList }
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0
    };
  },
  watch: {
    time(value) {
      value = value ? value : [];
      let [bigenTime = "", endTime = ""] = value;
      this.searchForm.bigenTime = utils.getTimeString(bigenTime).slice(0, 10);
      this.searchForm.endTime = utils.getTimeString(endTime).slice(0, 10);
    }
  },
  methods: {
    openPushList(row, prop) {
      this.$router.push({
        name: "outInsuranceConfigRecord",
        params: {
          row
        }
      });
    },
    searchList(pageNum) {
      //return;
      this.pageNum = pageNum || this.pageNum;
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchForm
      };
      this.$axios.post("/forcrm/out/push/outLogList", param).then(res => {
        this.tableData = res.list;
        this.totalSize = res.total;
      });
    },
    //表格格式化方法。prop对应array下标
    tableFormatter(prop, val) {
      if (prop == "status") {
        let statusMap = {
          5: "已到访",
          4: "未到访",
          7: "已认购",
          8: "已签约",
          9: "已过期",
          14: "推荐无效",
          12: "已退房",
          13: "已退房"
        };
        return statusMap[val];
      }
      return val;
    },
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    }
  },
  created() {
    this.searchList(1);
  },
  activated() {
    this.searchList();
  },
  destroyed() {},
  filters: {}
};
</script>

<style lang="stylus" scoped>
.citySubwayManage {
}
</style>
